import './CustomerEditor.scss'
import { Form, Input, Button, Select, Image, Modal,Row,Col,Space } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
const { Option } = Select;
const layout = {
  labelCol: {
      span: 6,
  },
  wrapperCol: {
      span: 17,
  },
};

const CustomerEditor=(props)=>{
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log(values);
  };
  const backCar = () => {
    props.setEditor(false)
  }
  const quxiao = () => {
    confirm({
        icon: <ExclamationCircleOutlined />,
        content: '您确定离开此页面吗？',
        cancelText: '取消',
        okText: '确定',
        onOk() {
            //   console.log('OK');
            backCar()
        },
        onCancel() {
            console.log('Cancel');
        },
    });
  }

  return (
    <div className='customereditor'>
      <div>
        {/* 1、头部 */}
        <div className='header'>
          {/* 左边 */}
          <div className='tit'>
            <div></div>
            <div>客户编辑详情</div>
          </div>
          {/* 右边 */}
          <div>
            <span className="iconfont icon-a-16guanbi" onClick={backCar}></span>
          </div>
        </div>
        <hr/>
        {/* 2、内容 */}
        <div className='content'>
        <Row>
          <Col span={8}>
            <p>客户基本信息：</p>
            <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
                <Form.Item
                    name="name"
                    label="客户名称"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input placeholder='请输入客户名称'/>
                </Form.Item>
                <Form.Item
                    name="contact"
                    label="联系方式"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input placeholder='请输入联系方式'/>
                </Form.Item>
                <Form.Item
                    name="level"
                    label="客户等级"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select placeholder='请选择'>
                      <Option value='一级'>一级</Option>
                      <Option value='二级'>二级</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    name="industry"
                    label="所属行业"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input placeholder='请输入所属行业'/>
                </Form.Item>
                <Form.Item
                    name="state"
                    label="跟进状态"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select placeholder='请选择'>
                      <Option value='成交'>成交</Option>
                      <Option value='意向'>意向</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    name="follower"
                    label="跟进人"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input placeholder='请输入跟进人'/>
                </Form.Item>
                <Form.Item
                    name="contacts"
                    label="联系方式"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input disabled/>
                </Form.Item>
              </Form>
          </Col>
          <Col span={16}>
            <p>客户需求信息：</p>
              <Form form={form} name="control-hooks" onFinish={onFinish}>
                <Form.Item
                  name="area"
                  label="需求面积"
                  rules={[
                      {
                          required: true,
                      },
                  ]}
                >
                  <Input style={{ display: 'inline-block', width: 'calc(50% - 30px)' }} placeholder='请输入最小面积'/>
                  <span
                    style={{ display: 'inline-block', width: '24px', textAlign: 'center' }}
                  >
                    ~
                  </span>
                  <Input style={{ display: 'inline-block', width: 'calc(50% - 30px)' }} placeholder='请输入最大面积'/>
                  <span
                  style={{ display: 'inline-block', width: '24px', textAlign: 'center' }}>㎡</span>
                </Form.Item>
                <Form.Item
                  name="price"
                  label="预算价格"
                  rules={[
                      {
                          required: true,
                      },
                  ]}
                >
                  <Input style={{ display: 'inline-block', width: 'calc(50% - 30px)' }} placeholder='请输入最小价格'/>
                  <span
                    style={{ display: 'inline-block', width: '24px', textAlign: 'center' }}
                  >
                    ~
                  </span>
                  <Input style={{ display: 'inline-block', width: 'calc(50% - 30px)' }} placeholder='请输入最大价格'/>
                  <span
                  style={{ display: 'inline-block', width: '36px', textAlign: 'center' }}>㎡/月</span>
                </Form.Item>
                <Form.Item
                  name="use"
                  label="租户用途"
                  rules={[
                      {
                          required: true,
                      },
                  ]}
              >
                  <Input style={{ display: 'inline-block', width: 'calc(50% - 30px)' }} placeholder='请输入租户用途'/>
              </Form.Item>
              <Form.Item
                name="house"
                label="意向房源"
                rules={[
                    {
                        required: true,
                    },
                ]}
                >
                  <Select style={{ display: 'inline-block', width: 'calc(50% - 30px)' }} placeholder='请选择'>
                    <Option value='A1幢'>A1幢</Option>
                    <Option value='C2幢'>C2幢</Option>
                  </Select>
                  <span
                    style={{ display: 'inline-block', width: '24px', textAlign: 'center' }}
                  >
                    ~
                  </span>
                  <Input style={{ display: 'inline-block', width: 'calc(50% - 30px)' }} placeholder='请输入房间名称'/>
                </Form.Item>
            </Form>
          </Col>
        </Row>
        </div>
        {/* 3、尾部：保存、取消按钮 */}
        <div className='footer'>
          <Form.Item>
            <Space size='large'>
                <Button type="primary" htmlType="submit">
                    保存编辑
                </Button>
                <Button onClick={quxiao}>
                    取消编辑
                </Button>
            </Space>
          </Form.Item>
        </div>
      </div>
    </div>
  )
}
export default CustomerEditor;